// Some of the animations are from animate.css (https://daneden.github.io/animate.css)

// Fade out
@keyframes fadeOut {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}
.fadeOut {
    animation-name: fadeOut;
}

@keyframes fadeOutDown {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
        transform: translate3d(0, 100%, 0);
    }
}
.fadeOutDown {
    animation-name: fadeOutDown;
}

@keyframes fadeOutUp {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
        transform: translate3d(0, -100%, 0);
    }
}
.fadeOutUp {
    animation-name: fadeOutUp;
}

// Fade In
@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}
.fadeIn {
    animation-name: fadeIn;
}

@keyframes fadeInDown {
    from {
        opacity: 0;
        transform: translate3d(0, -100%, 0);
    }
    to {
        opacity: 1;
        transform: none;
    }
}
.fadeInDown {
    animation-name: fadeInDown;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translate3d(0, 100%, 0);
    }
    to {
        opacity: 1;
        transform: none;
    }
}
.fadeInUp {
    animation-name: fadeInUp;
}

// Switch animation

@keyframes switchOn {
    10%, 50% {
        width: 2em;
        border-radius: 8em;
    }
    100% {
        transform: translate3d(80%, 0, 0) scale(0.74);
    }
}

@keyframes switchOff {
    0% {
        transform: translate3d(80%, 0, 0) scale(0.74);
    }
    50%, 90% {
        width: 2em;
        border-radius: 8em;
    }
}

/**
 * Vue Transitions
 */

// Fade
.fade-enter,
.fade-leave-active {
    opacity: 0;
}

// Zoom In
.zoom-in-enter,
.zoom-in-leave-active {
    opacity: 0;
}
.zoom-in-enter .animation-content {
    transform: scale(0.95);
}
.zoom-in-leave-active .animation-content {
    transform: scale(0.95);
}

// Zoom Out
.zoom-out-enter,
.zoom-out-leave-active {
    opacity: 0;
}
.zoom-out-enter .animation-content {
    transform: scale(1.05);
}
.zoom-out-leave-active .animation-content {
    transform: scale(1.05);
}

// Slide
.slide-prev-leave-to, .slide-next-enter {
    transform: translate3d(-100%, 0, 0);
    position: absolute;
    width: 100%;
}
.slide-prev-enter, .slide-next-leave-to {
    transform: translate3d(100%, 0, 0);
    position: absolute;
    width: 100%;
}
